<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
<title>登陆</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/model/login/login.css">
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/jquery-2.2.3.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/bootstrapValidator.min.js"></script>
</head>
<body>

	<!-- 定义容器 -->
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-sm-3"></div>

			<!-- 这一列为登陆表单 -->
			<div class="col-md-4 col-sm-6">
				<div class="panel panel-default">

					<!-- 登陆面板的标题 -->
					<div class="panel-title" style="text-align: center">
						<h2>登录</h2>
					</div>

					<!-- 登陆面板的主体 -->
					<div class="panel-body">

						<!-- 表单 -->
						<form id="login_form" class="form-horizontal" style="">

							<div class="form-group">
								<label class="control-label col-md-4 col-sm-4">用户ID：</label>
								<div class="col-md-7 col-sm-7">
									<input type="text" id="userID" class="form-control"
										placeholder="用户ID" name="usernameParam" autocomplete="off"/>
								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-md-4 col-sm-4"> <!-- <span class="glyphicon glyphicon-lock"></span> -->
									密码：
								</label>
								<div class="col-md-7 col-sm-7">
									<input type="text" id="password" class="form-control"
										placeholder="密码" name="passwordParam" onfocus="this.type='password'" autocomplete="off">
								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-md-4 col-sm-4"> <!-- <span class="glyphicon glyphicon-lock"></span> -->
									验证码：
								</label>
								<div class="col-md-5 col-sm-4">
									<input type="text" id="checkCode" class="form-control"
										placeholder="验证码" name="checkCode" autocomplete="off">
								</div>
								<div>
									<img id="checkCodeImg" alt="checkCodeImg" src="checkCode/1">
								</div>
							</div>

							<div>
								<div class="col-md-4 col-sm-4"></div>
								<div class="col-md-4 col-sm-4">
									<button id="submit" type="submit" class="btn btn-primary">
										&nbsp;&nbsp;&nbsp;&nbsp;登陆&nbsp;&nbsp;&nbsp;&nbsp;</button>
								</div>
								<div class="col-md-4 col-sm-4"></div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="col-md-4 col-sm-6" id="errorMessage"></div>
			<div class="col-md-4 col-sm-3"></div>
		</div>
	</div>
	
	<script type="text/javascript">
		history.go(1);
	</script>
	<script>
		$(function() {
			validatorInit();
			refreshCheckCode();
		});

		// 刷新图形验证码
		function refreshCheckCode() {
			$('#checkCodeImg').click(function() {
				var timestamp = new Date().getTime();
				$(this).attr("src", "checkCode/" + timestamp)
			})
		}

		function showPopover(target, msg) {
			target.attr("data-original-title", msg);
			$('[data-toggle="tooltip"]').tooltip();
			target.tooltip('show');
			target.focus();
			//2秒后消失提示框
			var id = setTimeout(function() {
				target.attr("data-original-title", "");
				target.tooltip('hide');
			}, 2000);
		}
		//使用插件初始化表单
		function validatorInit() {
			$('#login_form')
					.bootstrapValidator({
						//下面是验证提示信息
						message : 'This value is not valid',
						//bootstrap的图标
// 						feedbackIcons : {
// 							valid : 'glyphicon glyphicon-ok',
// 							invalid : 'glyphicon glyphicon-remove',
// 							validating : 'glyphicon glyphicon-refresh'
// 						},
						//live : 'submitted',
						fields : {
							usernameParam : {
								validators : {
									notEmpty : {
										message : '用户名不能为空'
									},
									regexp : {
										regexp : '[0-9]+',
										message : '只允许输入数字'
									},
									callback : {}
								}
							},
							passwordParam : {
								validators : {
									notEmpty : {
										message : '密码不能为空'
									},
									callback : {}
								}
							},
							checkCode : {
								validators : {
									notEmpty : {
										message : '验证码不能为空'
									}
								}
							}
						}
					})
					.on(
							'success.form.bv',
							function(e) {
								// 禁用默认表单提交
								e.preventDefault();

								// 获取 form 实例
								var $form = $(e.target);
								// 获取 bootstrapValidator 实例
								var bv = $form.data('bootstrapValidator');

								// 发送数据到后端 进行验证
								var userID = $('#userID').val();
								var password = $('#password').val();
								var checkCode = $('#checkCode').val();

								var data = {
									"id" : userID,
									"password" : password,
									"ip" : returnCitySN["cip"],
									"checkCode" : checkCode
								}
								$
										.ajax({
											type : "POST",
											url : "login",
											dataType : "json",
											contentType : "application/json",
											data : JSON.stringify(data),
											success : function(response) {
												// 接收到后端响应
												//alert(response.result);
												// 分析返回的 JSON 数据
												if (response.result == 'error') {
													var msg = "";
													if (response.msg == "-1") {
														msg = "验证码错误";
														
													} else if (response.msg == "0") {
														msg = "密码或账号错误";
													} else if(response.msg == "-2"){
														msg = "没有登陆权限";
													}else{
														msg = "服务器错误";
													}
													showPopover($("#submit"),msg);
													//alert(msg);
													//$('#userID').val("");
													//$('#password').val("");
													// 更新 callback 错误信息，以及为错误对应的字段添加 错误信息
													//bv.updateMessage(field,'callback',msg);
													//bv.updateStatus(field,'INVALID','callback');
													//bv.updateStatus("checkCode",'INVALID','callback');
													$('#checkCodeImg')
															.attr(
																	"src",
																	"checkCode/"
																			+ new Date()
																					.getTime());
													$('#checkCode').val("");
													
												} else {
													// 页面跳转
													if (password == "123") {
														window.location.href = "forcedissonionPassword";
													} else {
														window.location.href = "mainPage";
													}
												}
											},
											error : function(data) {
												// 处理错误
											}
										});
							});
		}
	</script>
</body>
</html>